<template>
  <view class="content" @click="toList()">
    <view
      class="start-btn text-primaryColor flex items-center justify-center text-[42px]"
      
    >
      <view class="relative w-full h-full flex items-center justify-center">
        点击任意位置进入
        <view class="relative">
          <view class="round circle"></view>
          <view class="round small-circle"></view>
          <view class="round less-circle"></view>
          <image src="@/assets/images/pointer.png" class="pointer-img" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
function toList() {
  uni.navigateTo({
    url: "/pages/list/list",
  });
}
</script>

<style lang="scss" scoped>
@keyframes animation-hand-move {
  0% {
    transform: translate(14px, -26px);
  }

  20% {
    transform: translate(14px, -26px);
  }

  25% {
    transform: translate(14px, -26px) scale(0.92) rotate(-3deg);
    opacity: 1;
  }

  75% {
    transform: translate(14px, -26px) scale(0.92) rotate(-3deg);
    opacity: 1;
  }

  90% {
    transform: translate(50px, 40px) scale(1) rotate(0deg);
    opacity: 0.6;
  }

  100% {
    opacity: 0;
  }
}
@keyframes animation-wave {
  0%,
  20%,
  100% {
    opacity: 0;
  }

  25% {
    width: 0px;
    height: 0px;
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  75% {
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes animation-small-wave {
  0%,
  20%,
  100% {
    opacity: 0;
  }

  42% {
    width: 0px;
    height: 0px;
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  75% {
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes animation-less-wave {
  0%,
  20%,
  100% {
    opacity: 0;
  }

  59% {
    width: 0px;
    height: 0px;
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  75% {
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}

.content {
  margin: auto;
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/images/welcome.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: content-box;

  .start-btn {
    position: fixed;
    left: 50%;
    bottom: 276px;
    transform: translateX(-50%);
    width: 560px;
    height: 166px;
    background: url("@/assets/images/welcome_btn.png") no-repeat;
    background-size: 100% 100%;
    background-clip: content-box;
    padding-bottom: 7px;
    cursor: pointer;
    .round {
      position: absolute;
      top: -50px;
      left: -20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: transparent;

      &::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: transparent;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        border: 7px solid rgba(255, 255, 255, 1);
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
    }

    .circle {
      &::before {
        animation: animation-wave 3s infinite linear;
      }
    }

    .small-circle {
      &::before {
        animation: animation-small-wave 3s infinite linear;
      }
    }

    .less-circle {
		
      &::before {
        animation: animation-less-wave 3s infinite linear;
      }
    }

    .pointer-img {
      @apply absolute w-[125px] h-[128px];
      transform: translate(14px, -26px);
      animation: animation-hand-move 3s infinite linear;
    }
  }
}
</style>
